<template>

  <div :class="$style.detailedTicketsPage">
    <div :class="$style.TicketWrapper">
      <div :class="$style.subHeader">
        <div :class="$style.branding">
          <div :class="$style.logo">
            <img :class="$style.logo1x23Icon" loading="lazy" alt="logo" src="/logo1x2-3@2x.png" />
          </div>
        </div>
        <div :class="$style.exchangeTitle">
          <a :class="$style.a">福汇交易所</a>
        </div>
      </div>
      <div :class="$style.accountStatusWrapper">
        <div :class="$style.accountStatus">
          <div :class="$style.userBalance">
            <div :class="$style.balanceDetails">
              <img :class="$style.icon" alt="" src="/@2x.png" />
              <div :class="$style.buttonWrapper">
                <a :class="$style.a1">总收益：</a>
                <a :class="$style.usd">0 USD</a>
              </div>
            </div>
          </div>
          <div :class="$style.availableBalance">
            <div :class="$style.buttonWrapper2">
              <a :class="$style.a2">可用余额：</a>
              <a :class="$style.usd1">0.000 USD</a>
            </div>
          </div>
          <div :class="$style.accountType">
            <div :class="$style.accountLabel">
              <div :class="$style.div5" />
              <div :class="$style.div6">
                <div :class="$style.div7" />
                <a :class="$style.a3">真实账户</a>
                <img :class="$style.icon1" alt="" src="/-1.svg" />
              </div>
            </div>
          </div>

          <div :class="$style.accountType1">
            <div :class="$style.parent">
              <div :class="$style.div8" />
              <button @click="one = !one" :class="$style.div9">
                <div :class="$style.div10" />
                <a :class="$style.a4">简体中文</a>
                <img :class="$style.icon2" alt="" src="/-1.svg" />
              </button>
              <section v-if="one" :class="$style.headerDropdown2Wrapper">
                <div :class="$style.headerDropdown2">
                  <div :class="$style.activeWrapper">
                    <div :class="$style.checkIcon"></div>
                    <button :class="$style.activeLink">简体中文</button>
                  </div>
                  <div :class="$style.inactiveWrapper">
                    <button :class="$style.inactiveLink">繁体中文</button>
                  </div>
                  <div :class="$style.inactiveWrapper">
                    <button :class="$style.inactiveLink">English</button>
                  </div>
                  <div :class="$style.inactiveWrapper">
                    <button :class="$style.inactiveLink">日本语</button>
                  </div>
                  <div :class="$style.inactiveWrapper">
                    <button :class="$style.inactiveLink">한국인</button>
                  </div>
                  <div :class="$style.inactiveWrapper">
                    <button :class="$style.inactiveLink">Tiếng Việt</button>
                  </div>
                </div>
              </section>
            </div>
          </div>
          <button @click.prevent="showModal" :class="$style.userProfile">
            <img :class="$style.icon3" alt="" src="/-3@2x.png" />
            <div :class="$style.div11">
              <a :class="$style.userutg8o2">useruTg8o2</a>
              <div :class="$style.wujunjie889900outlookcom">
                wujunjie889900@outlook.com
              </div>
            </div>
          </button>
        </div>
      </div>
    </div>
    <section :class="$style.content">
      <div :class="$style.div12">
        <!-- sidebar links -->
        <div :class="$style.divss">
          <div :class="$style.div1ss" />
          <div :class="$style.overviewContainerss">
            <div :class="$style.div2ss">
              <div :class="$style.div3ss" />
              <div :class="$style.rectangleParentss">
                <img @click="activePage = 'MainComp'" :class="$style.iconss" alt="" src="/-4@2x.png" />
                <div :class="$style.div4ss">自选</div>
              </div>
            </div>
            <div :class="$style.div5ss">
              <div :class="$style.div6ss" />
              <div :class="$style.rectangleGroupss">
                <div :class="$style.frameItemss" />
                <img @click="activePage = 'MainComp2'" :class="$style.icon1ss" alt="" src="/-5@2x.png" />
                <div :class="$style.div7ss">收藏</div>
              </div>
            </div>
          </div>
          <div :class="$style.div8ss">
            <div :class="$style.div9ss" />
            <div :class="$style.rectangleContainerss">
              <div :class="$style.frameInnerss" />
              <img @click="activePage = 'LastModal1'" :class="$style.icon2ss" alt="" src="/-6@2x.png" />
              <div :class="$style.div10ss">新闻</div>
            </div>
          </div>
        </div>
        <!-- sidebar linkend -->
        <div :class="$style.watchlist">
          <div :class="$style.div13">
            <div :class="$style.sideIcons1">
              <div :class="$style.sideIcons2">
                <div :class="$style.sideIcons3"></div>
                <div :class="$style.sideIcons4">
                  <div :class="$style.sideIcons5">
                    <div :class="$style.sideIcons6"></div>
                    <img @click="activePage = 'LastModal1'" src="/anheimoshi@1x.png" :class="$style.sideIcons7">
                  </div>
                </div>
                <div :class="$style.sideIcons8">
                  <div :class="$style.sideIcons9"></div>
                  <img src="/gerenzhongxin@1x.png" :class="$style.sideIcons10">
                </div>
                <div :class="$style.sideIcons11">
                  <div :class="$style.sideIcons9"></div>
                  <img src="/kefu@1x.png" :class="$style.sideIcons12">
                </div>
                <div :class="$style.sideIcons13">
                  <div :class="$style.sideIcons14"></div>
                  <img @click.prevent="showModal1" src="/pingcangjinggao@1x.png" :class="$style.sideIcons15">
                </div>
                <div :class="$style.sideIcons16">
                  <div :class="$style.sideIcons9"></div>
                  <img @click.prevent="showModal2" src="/tongzhi@1x.png" :class="$style.sideIcons17">
                </div>
                <div :class="$style.sideIcons18">
                  <div :class="$style.sideIcons9"></div>
                  <img src="/tuichu@1x.png" :class="$style.sideIcons19">
                </div>
              </div>
              <div :class="$style.sideIcons20"></div>
              <div :class="$style.sideIcons21"></div>
              <div :class="$style.sideIcons22">0</div>
            </div>
            <div :class="$style.watchlistStatus">
              <div :class="$style.div16" />
            </div>
          </div>
        </div>
      </div>
      <component :is="activePage" />
    </section>

  </div>

  <!-- start modal here -->
  <div :class="$style.paa">
    <Modal-Pop v-show="isModalVisible" @close="closeModal" />
  </div>
  <div :class="$style.paa">
    <FrameSM v-show="isModal1Visible" @close="closeModal1" />
  </div>
  <div :class="$style.paa">
    <FrameSM2 v-show="isModal2Visible" @close="closeModal2" />
  </div>


</template>
<script>
import { defineComponent } from "vue";
import Frame1 from "../components/Frame1.vue";
import Frame from "../components/Frame.vue";
import K from "../components/K.vue";
import TradingView from "../components/TradingView.vue";

import Modal2 from "../components/Modal2.vue";
import BlueModal from "../components/BlueModal.vue";
import RedModal from "../components/RedModal.vue";
import RedwModal from "../components/RedwModal.vue";
import RgModal1 from "../components/RgModal1.vue";
import WhiteModal from "../components/WhiteModal.vue";
import OrangeModal from "../components/OrangeModal.vue";
import LogoutModal from "../components/LogoutModal.vue";
import FrameSM from "../components/FrameSM.vue";
import GbModal from "../components/GbModal.vue";
import Modal3 from "../components/Modal3.vue";
import GreenModal from "../components/GreenModal.vue";
import ModalB from "../components/ModalB.vue";
import ModalPop from "../components/ModalPop.vue";
import FrameSM2 from "../components/FrameSM2.vue";
import MainComp from "../components/MainComp.vue";
import LastModal1 from "../components/LastModal1.vue";
import MainComp2 from "../components/MainComp2.vue";





export default defineComponent({
  name: "DetailedTicketsPage",
  components: { Frame1, MainComp, MainComp2, LastModal1, Frame, FrameSM2, K, ModalPop, TradingView, Modal3, ModalB, GreenModal, Modal2, BlueModal, RedModal, RedwModal, RgModal1, WhiteModal, OrangeModal, LogoutModal, FrameSM, GbModal },
  data() {
    return {
      isModalVisible: false,
      isModal1Visible: false,
      isModal2Visible: false,
      activeTab: "Modal3",
      activePage: "MainComp",
      open: false,
      on: false,
      one: false


    };
  },
  methods: {
    close() {
      this.$emit('close');
    },
    showModal() {
      this.isModalVisible = true;
    },
    showModal1() {
      this.isModal1Visible = true;
    },
    showModal2() {
      this.isModal2Visible = true;
    },
    closeModal() {
      this.isModalVisible = false;
    },
    closeModal1() {
      this.isModal1Visible = false;
    },
    closeModal2() {
      this.isModal2Visible = false;
    },
    scrollToAnchorPoint(refName) {
      const el = this.$refs[refName]
      el.scrollIntoView({ behavior: 'smooth' })
    }

  },
  created(){
    // let that=this;          
    // let loadIndex = that.$layer.load();
    // that.$axios.post('/api/User/info', {}).then((res) => {
    //     that.$layer.close(loadIndex);
    //     that.$layer.msg(res.data.message, { time: 1000 });
    // }).catch((err) => {
    //     that.$layer.close(loadIndex);
    //     that.$layer.msg('失败', { time: 1000 });
    // });
  }
});
</script>
<style module>
.div1ss {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.div3ss {
  height: 65.2px;
  width: 45px;
  position: relative;
  background-color: var(--color-aliceblue);
  display: none;
}

.frameChildss {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.iconss {
  width: 15px;
  height: 15px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: contain;
  debug_commit: bf4bc93;
  z-index: 1;
}

.div4ss {
  margin-left: -3.800000000000182px;
  position: relative;
  line-height: 10.5px;
  font-weight: 300;
  flex-shrink: 0;
  debug_commit: bf4bc93;
  z-index: 1;
  width: 31px;
}

.rectangleParentss {
  height: 33px;
  background-color: var(--color-aliceblue);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-10xs) var(--padding-lg);
  box-sizing: border-box;
  position: relative;
  gap: var(--gap-5xs-5);
  z-index: 1;
}

.div2ss {
  align-self: stretch;
  background-color: var(--color-aliceblue);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-base-5) var(--padding-xs) var(--padding-base-7);
  z-index: 1;
}

.div6ss {
  height: 65.2px;
  width: 45px;
  position: relative;
  background-color: var(--color-white);
  display: none;
}

.frameItemss {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.icon1ss {
  width: 15px;
  height: 15px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  debug_commit: bf4bc93;
  z-index: 1;
}

.div7ss {
  margin-left: -3.800000000000182px;
  position: relative;
  line-height: 10.5px;
  font-weight: 300;
  flex-shrink: 0;
  debug_commit: bf4bc93;
  z-index: 1;
  width: 31px;
}

.rectangleGroupss {
  height: 33px;
  background-color: var(--color-whitesmoke-100);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-10xs) var(--padding-lg);
  box-sizing: border-box;
  position: relative;
  gap: var(--gap-5xs-5);
  z-index: 1;
}

.div5ss {
  align-self: stretch;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-base-5) var(--padding-xs) var(--padding-base-7);
  z-index: 2;
  color: var(--color-dimgray-300);
}

.overviewContainerss {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.div9ss {
  height: 65.2px;
  width: 45px;
  position: relative;
  background-color: var(--color-white);
  display: none;
}

.frameInnerss {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.icon2ss {
  width: 15px;
  height: 15px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  debug_commit: bf4bc93;
  z-index: 1;
}

.div10ss {
  margin-left: -3.800000000000182px;
  position: relative;
  line-height: 10.5px;
  font-weight: 300;
  flex-shrink: 0;
  debug_commit: bf4bc93;
  z-index: 1;
  width: 31px;
}

.rectangleContainerss {
  height: 33px;
  background-color: var(--color-whitesmoke-100);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-10xs) var(--padding-lg);
  box-sizing: border-box;
  position: relative;
  gap: var(--gap-5xs-5);
  z-index: 1;
}

.div8ss {
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-base-5) var(--padding-xs) var(--padding-base-7);
  z-index: 1;
  color: var(--color-dimgray-300);
}

.divss {
  align-self: stretch;
  background-color: var(--color-whitesmoke-100);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px var(--padding-12xs-1);
  position: relative;
  gap: var(--gap-12xs-1);
  text-align: left;
  font-size: var(--font-size-2xs-5);
  color: var(--color-dodgerblue);
  font-family: var(--font-source-han-sans-cn);
}

.sideIcons1 {
  width: 18px;
  position: relative;
  top: -137px;
  z-index: 999;
}

.sideIcons2 {
  width: 15px;
  left: 0px;
  top: 0px;
  position: absolute;
  background: white
}

.sideIcons3 {
  width: 15px;
  left: 0px;
  top: 0px;
  position: absolute
}

.sideIcons4 {
  width: 15px;
  height: 15px;
  left: 0px;
  top: 0px;
  position: absolute;
  justify-content: center;
  align-items: center;
  display: inline-flex
}

.sideIcons5 {
  width: 15px;
  height: 15px;
  position: relative;
  ;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex
}

.sideIcons6 {
  width: 15px;
  height: 15px;
}

.sideIcons7 {
  width: 12.75px;
  height: 15px
}

.sideIcons8 {
  width: 15px;
  height: 15px;
  left: 0px;
  top: 45px;
  position: absolute;
}

.sideIcons9 {
  width: 15px;
  height: 15px;
  left: 0px;
  top: 0px;
  position: absolute;
}

.sideIcons10 {
  width: 13.50px;
  height: 15px;
  left: 0.75px;
  top: 0px;
  position: absolute
}

.sideIcons11 {
  width: 15px;
  height: 15px;
  left: 0px;
  top: 90px;
  position: absolute;
}

.sideIcons12 {
  width: 13.64px;
  height: 13.36px;
  left: 0.68px;
  top: 0.82px;
  position: absolute
}

.sideIcons13 {
  width: 15px;
  height: 13.91px;
  left: 0px;
  top: 135px;
  position: absolute;
}

.sideIcons14 {
  width: 15px;
  height: 13.91px;
  left: 0px;
  top: 0px;
  position: absolute;
}

.sideIcons15 {
  width: 13.50px;
  height: 11.25px;
  left: 0.75px;
  top: 1.50px;
  position: absolute
}

.sideIcons16 {
  width: 15px;
  height: 15px;
  left: 0px;
  top: 178.91px;
  position: absolute;
}

.sideIcons17 {
  width: 10.50px;
  height: 13.50px;
  left: 2.25px;
  top: 1.09px;
  position: absolute
}

.sideIcons18 {
  width: 15px;
  height: 15px;
  left: 0px;
  top: 223.91px;
  position: absolute;
}

.sideIcons19 {
  width: 13.50px;
  height: 14.25px;
  left: 0.75px;
  top: 0.34px;
  position: absolute
}

.sideIcons20 {
  width: 2.25px;
  height: 2.25px;
  left: 12.75px;
  top: 178.50px;
  position: absolute;
  background: #EC5B56;
  border-radius: 9999px
}

.sideIcons21 {
  width: 8.25px;
  height: 6px;
  left: 9.75px;
  top: 132.75px;
  position: absolute;
  background: #EC5B56;
  border-radius: 75px
}

.sideIcons22 {
  width: 5.25px;
  left: 11.25px;
  top: 134.25px;
  position: absolute;
  color: white;
  font-size: 6px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 3px;
  word-wrap: break-word
}

.headerDropdown1Wrapper {
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  background-color: white;
  z-index: 999;
  top: 80px
}

.headerDropdown1 {
  width: 210px;
  z-index: 999;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  position: absolute;

  height: 106px;
  padding-top: 11px;
  padding-bottom: 7px;
  padding-left: 3px;
  padding-right: 4px;
  background: white;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 9px;
  display: inline-flex;
}

.headerDropdown2Wrapper {
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  background-color: white;
  z-index: 999;
  top: 40px
}

.headerDropdown2 {
  width: 93px;
  z-index: 999;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  position: absolute;

  height: 153px;
  padding-top: 11px;
  padding-bottom: 7px;
  padding-left: 3px;
  padding-right: 4px;
  background: white;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 9px;
  display: inline-flex;
}

.activeWrapper {
  align-self: stretch;
  width: 80px;
  height: 15px;
  padding-top: 3px;
  padding-bottom: 7px;
  padding-left: 9px;
  padding-right: 15.71px;
  justify-content: flex-start;
  align-items: center;
  gap: 9.21px;
  display: inline-flex;
  position: relative;
  top: 3px;
}

.checkIcon {
  width: 8.79px;
  height: 6.30px;
  background: #1890FF;
  position: relative;

}

.activeLink {
  width: 80.29px;
  color: #1890FF;
  font-size: 10.45px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  line-height: 10.45px;
  word-wrap: break-word;
  padding-left: 0px;
  position: relative;

}

.inactiveWrapper {
  width: 60px;
  align-self: stretch;
  height: 15px;
  padding-top: 3px;
  padding-bottom: 1px;
  padding-left: 27px;
  padding-right: 15.71px;
  justify-content: flex-start;
  align-items: start;
  display: inline-flex;
  padding: 2px;
  text-align: start;
  position: relative;
  left: 20px
}

.inactiveLink {
  width: 60px;
  color: #909399;
  font-size: 10.45px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  line-height: 10.45px;
  word-wrap: break-word
}

/* modal css here */
.aa {
  text-decoration: none;
  position: relative;
  line-height: 10.5px;
  font-weight: 300;
  color: inherit;
}

.icona {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 12px;
}

.userCenterLinka {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 100%;
  gap: var(--gap-xl);
}

.userCenterLinkWrappera {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-mini) 0px var(--padding-smi);
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-sm-5);
  color: var(--color-dimgray-300);
  font-family: var(--font-source-han-sans-cn);
}

.rootChilda {
  width: 430px;
  height: 400px;
  left: 140px;
  top: 60px;
  position: absolute;
  overflow: hidden;
  flex-shrink: 0;

  max-width: 100%;

  z-index: 999;
}

.icon1a {
  align-self: stretch;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  border-top: 1px solid #DCDFE6;
}

.icon2a {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  min-height: 12px;
  debug_commit: bf4bc93;
}

.a1a {

  text-decoration: none;
  position: relative;
  line-height: 10.5px;
  color: inherit;
  flex-shrink: 0;
  debug_commit: bf4bc93;
  font-size: 10.50px;
  font-family: Source Han Sans CN;
  font-weight: 350;
  line-height: 10.50px;
  word-wrap: break-word;
  color: #515A6E;

}

.a1a:hover {
  color: var(--color-dodgerblue);
}

.parentma {
  background-color: var(--color-whitesmoke-500);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs-3);

  background-color: white;
}

button {
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
}

.icon3a {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  min-height: 12px;
  debug_commit: bf4bc93;
}

.a2a {
  text-decoration: none;
  position: relative;
  line-height: 10.5px;
  color: inherit;
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.groupa {
  background-color: var(--color-whitesmoke-500);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs-3);
}

.icon4a {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  min-height: 12px;
  debug_commit: bf4bc93;
}

.a3a {
  text-decoration: none;
  position: relative;
  line-height: 10.5px;
  color: inherit;
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.containera {
  background-color: var(--color-whitesmoke-500);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs-3);
}

.icon5a {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 12px;
  debug_commit: bf4bc93;
}

.diva {
  position: relative;
  line-height: 10.5px;
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.frameDiva {
  background-color: var(--color-whitesmoke-500);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs-3);
}

.icon6a {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 12px;
  debug_commit: bf4bc93;
}

.div1a {
  position: relative;
  line-height: 10.5px;
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.parent1a {
  background-color: var(--color-whitesmoke-500);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs-3);
}

.icon7a {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 12px;
  debug_commit: bf4bc93;
}

.div2a {
  position: relative;
  line-height: 10.5px;
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.parent2a {
  background-color: var(--color-whitesmoke-500);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs-3);
}

.icon8a {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  min-height: 12px;
  debug_commit: bf4bc93;
}

.div3a {
  position: relative;
  line-height: 10.5px;
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.parent3a {
  background-color: var(--color-whitesmoke-500);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs-3);
}

.icon9a {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  min-height: 12px;
  debug_commit: bf4bc93;
}

.div4a {
  position: relative;
  line-height: 10.5px;
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.parent4a {
  background-color: var(--color-whitesmoke-500);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs-3);
}

.icon10a {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: contain;
  min-height: 12px;
  debug_commit: bf4bc93;
}

.div5a {
  position: relative;
  line-height: 10.5px;
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.parent5a {
  background-color: var(--color-whitesmoke-500);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs-3);
}

.icon11a {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  min-height: 12px;
  debug_commit: bf4bc93;
}

.div6a {
  position: relative;
  line-height: 10.5px;
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.parent6a {
  background-color: var(--color-whitesmoke-500);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs-3);
}

.actionsa {

  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-2xl-7);
}

.verificationa {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 26px;
}

.profilesa {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 19.8px 0px 0px;
}

.icon12a {
  height: 470px;
  width: 0.9px;
  position: relative;
  object-fit: contain;
  background-color: #DCDFE6;
  z-index: 999;
}

.profilesParenta {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
}

.contenta {
  width: 135.9px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-xs);
  box-sizing: border-box;
}

.canvasa {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.8px;
  text-align: left;
  font-size: var(--font-size-2xs-5);
  color: var(--color-dimgray-300);
  font-family: var(--font-source-han-sans-cn);
}

.roota {
  width: 600px;

  background-color: var(--color-white);
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 13.5px 0px var(--padding-12xs);
  box-sizing: border-box;
  gap: 15.8px;
  line-height: normal;
  letter-spacing: normal;
  position: absolute;
  z-index: 999;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
}

.paa {
  top: -2px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  /* Just for visibility, you can remove this */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;

}

/* modal css ends  */
.logo {
  position: absolute;
  top: 4.5px;
  left: 7.5px;
  width: 30px;
  height: 30px;
}

.logo1x23Icon {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.branding {
  height: 40px;
  width: 40px;
  position: relative;
}

.a {
  text-decoration: none;
  position: relative;
  line-height: 15px;
  font-weight: 500;
  color: inherit;
}

.exchangeTitle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-xs) 0px 0px;
}

.subHeader {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5px;
}

.icon {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}

.div2 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.a1 {
  margin-left: -41.900000000001455px;
  text-decoration: none;
  width: 51.9px;
  position: relative;
  line-height: 15px;
  font-weight: 300;
  color: inherit;
  display: inline-block;
  flex-shrink: 0;
  debug_commit: bf4bc93;
  z-index: 1;
}

.usd {
  left: -8px;
  width: 60px;
  padding-right: 5px;
  position: relative;
  text-decoration: none;
  position: relative;
  line-height: 15px;
  font-weight: 500;
  color: var(--color-mediumspringgreen);
  flex-shrink: 0;

  white-space: nowrap;
  z-index: 2;
}

.buttonWrapper {
  width: 72px;
  background-color: var(--color-white);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-11xl) 0px var(--padding-22xl);
  box-sizing: border-box;
  position: relative;
}

.balanceDetails {
  padding-right: 5px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-mini);
}

.userBalance {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xs-5) 0px 0px;
}

.div4 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.a2 {
  margin-left: -52.5px;
  text-decoration: none;
  width: 52.5px;
  position: relative;
  line-height: 15px;
  font-weight: 300;
  color: inherit;
  display: inline-block;
  flex-shrink: 0;
  debug_commit: bf4bc93;
  z-index: 1;
}

.usd1 {
  text-decoration: none;
  position: relative;
  line-height: 15px;
  font-weight: 500;
  color: var(--color-dimgray-300);
  flex-shrink: 0;
  debug_commit: bf4bc93;
  white-space: nowrap;
  z-index: 2;
}

.buttonWrapper2 {
  align-self: stretch;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 51px;
  position: relative;
}

.availableBalance {
  width: 103.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xs-5) 0px 0px;
  box-sizing: border-box;
}

.div5 {
  height: 12px;
  width: 0.8px;
  position: relative;
  background-color: var(--color-gainsboro-200);
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.div7 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.a3 {
  margin-left: -50.20000000000073px;
  text-decoration: none;
  position: relative;
  line-height: 10.5px;
  font-weight: 300;
  color: inherit;
  display: inline-block;
  flex-shrink: 0;
  debug_commit: bf4bc93;
  z-index: 1;
}

.icon1 {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 12px;
  debug_commit: bf4bc93;
  z-index: 1;
}

.div6 {
  width: 61.5px;
  background-color: var(--color-white);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px 0px var(--padding-30xl);
  box-sizing: border-box;
  position: relative;
  gap: var(--gap-6xs-7);
  debug_commit: bf4bc93;
}

.accountLabel {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-mini);
}

.accountType {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xs-5) 0px 0px;
}

.div8 {
  height: 12px;
  width: 0.8px;
  position: relative;
  background-color: var(--color-gainsboro-200);
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.div10 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.a4 {
  margin-left: -50.20000000000073px;
  text-decoration: none;
  position: relative;
  line-height: 10.5px;
  font-weight: 300;
  color: inherit;
  display: inline-block;
  flex-shrink: 0;
  debug_commit: bf4bc93;
  z-index: 1;
  color: #606266;
  font-size: 10.50px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  line-height: 10.50px;
  word-wrap: break-word
}

.icon2 {
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 12px;
  debug_commit: bf4bc93;
  z-index: 1;
}

.div9 {
  width: 61.5px;
  background-color: var(--color-white);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px 0px var(--padding-30xl);
  box-sizing: border-box;
  position: relative;
  gap: var(--gap-6xs-7);
  debug_commit: bf4bc93;
}

.parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14.9px;
}

.accountType1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xs-5) var(--padding-mid) 0px 0px;
}

.icon3 {
  height: 30px;
  width: 30px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  debug_commit: bf4bc93;
}

.userutg8o2 {
  text-decoration: none;
  position: relative;
  line-height: 10.5px;
  color: inherit;
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.wujunjie889900outlookcom {
  position: relative;
  line-height: 10.5px;
  color: var(--color-gray-100);
  flex-shrink: 0;
  debug_commit: bf4bc93;
  white-space: nowrap;
}

.div11 {
  height: 25.5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px 14.5px;
  box-sizing: border-box;
  gap: 4px;
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.userProfile {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7px;
  color: var(--color-dimgray-300);
  z-index: 999;
}

.accountStatus {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-mini);
}

.accountStatusWrapper {
  width: 619.6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-8xs-5) 0px 0px;
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--font-size-2xs-5);
  color: var(--color-gray-100);
}

.TicketWrapper {
  align-self: stretch;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--padding-10xs) var(--padding-3xs) var(--padding-11xs) 0px;
  box-sizing: border-box;
  max-width: 100%;
  gap: var(--gap-xl);
}

.icon4 {
  width: 15px;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  bottom: 0px;
  left: 0px;
  max-height: 100%;
  overflow: hidden;
  object-fit: cover;
}

.div14 {
  height: 6px;
  width: 8.3px;
  position: relative;
  border-radius: var(--br-56xl);
  background-color: var(--color-salmon);
  display: none;
}

.div15 {
  position: relative;
  line-height: 3px;
  z-index: 2;
}

.group {
  width: 8.3px;
  border-radius: var(--br-56xl);
  background-color: var(--color-salmon);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs-5) var(--padding-12xs);
  box-sizing: border-box;
  z-index: 1;
}

.div16 {
  height: 2.2px;
  width: 2.2px;
  position: relative;
  border-radius: 50%;
  background-color: var(--color-salmon);
  z-index: 1;
}

.watchlistStatus {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0px var(--padding-10xs) 0px var(--padding-smi);
}

.div13 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 132.8px 0px 58.2px;
  position: relative;
  gap: 39.7px;
}

.watchlist {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0px var(--padding-xs) 0px var(--padding-mini);
}

.div12 {
  width: 45px;
  background-color: var(--color-white);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0px 0px 23.7px;
  box-sizing: border-box;
  gap: 302.9px;
  font-size: 6px;
  color: var(--color-white);
}

.div19 {
  height: 22.5px;
  width: 210px;
  position: relative;
  border-radius: 2.25px;
  border: 0.8px solid var(--color-gainsboro-200);
  box-sizing: border-box;
  display: none;
}

.a5 {
  text-decoration: none;
  position: relative;
  line-height: 10.5px;
  font-weight: 300;
  color: inherit;
  z-index: 1;
}

.icon5 {
  height: 10.5px;
  width: 10.5px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}

.div18 {
  align-self: stretch;
  border-radius: 2.25px;
  border: 0.8px solid var(--color-gainsboro-200);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--padding-8xs) var(--padding-4xs) var(--padding-9xs) var(--padding-5xs);
  gap: var(--gap-xl);
  z-index: 99;
}

.div17 {
  width: 225px;
  background-color: var(--color-white);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xs-5) var(--padding-8xs) 72px var(--padding-6xs);
  box-sizing: border-box;
  gap: 22.5px;
  color: var(--color-dimgray-200);
}

.div20 {
  position: relative;
  line-height: 10.52px;
}

.openPositionsTab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-mini-6) 0px 0px;
}

.div21 {
  position: relative;
  line-height: 10.52px;
}

.tabsContent {
  width: 52.4px;
  background-color: var(--color-white);
  border: 1.3px solid var(--color-whitesmoke-300);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-sm) var(--padding-xs) var(--padding-4xs) var(--padding-base);
}

.tabsContent1 {
  width: 100%;
  border: none;
  outline: none;
  background-color: var(--color-whitesmoke-200);
  height: 37.8px;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-base) var(--padding-base) 10.8px;
  box-sizing: border-box;
  font-family: var(--font-source-han-sans-cn);
  font-size: var(--font-size-2xs-5);
  color: var(--color-gray-100);
  min-width: 38px;
  z-index: 1;
  margin-left: -0.1px;
}

.orderHistoryTab {
  width: 116.3px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  color: var(--color-dodgerblue);
}

.div22 {
  align-self: stretch;
  position: relative;
  line-height: 10.52px;
}

.tabLabel {
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-base) 0px 0px;
  box-sizing: border-box;
}

.div23 {
  align-self: stretch;
  position: relative;
  line-height: 10.52px;
}

.tabLabel1 {
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-base) 0px 0px;
  box-sizing: border-box;
}

.openPositionsTabParent {
  align-self: stretch;
  background-color: var(--color-whitesmoke-200);
  border: 1.3px solid var(--color-whitesmoke-300);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-base) var(--padding-12xs-1);
  gap: 15.5px;
}

.input {
  width: 46.6px;
  border: none;
  outline: none;
  font-weight: 300;
  font-family: var(--font-source-han-sans-cn);
  font-size: var(--font-size-2xs-5);
  background-color: transparent;
  height: 11px;
  position: relative;
  line-height: 10.52px;
  color: var(--color-gray-100);
  text-align: left;
  display: inline-block;
  padding: 0;
}

.orderNumber {
  width: 168.8px;
  background-color: var(--color-whitesmoke-200);
  border: 1.3px solid var(--color-whitesmoke-300);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-smi) 59px var(--padding-xs);
}

.input1 {
  width: 48px;
  border: none;
  outline: none;
  font-weight: 300;
  font-family: var(--font-source-han-sans-cn);
  font-size: var(--font-size-2xs-5);
  background-color: transparent;
  height: 11px;
  position: relative;
  line-height: 10.52px;
  color: var(--color-gray-100);
  text-align: left;
  display: inline-block;
  padding: 0;
}

.infoLabels {
  width: 97.5px;
  background-color: var(--color-whitesmoke-200);
  border: 1.3px solid var(--color-whitesmoke-300);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-sm) var(--padding-base) var(--padding-4xs);
}

.input2 {
  width: 48px;
  border: none;
  outline: none;
  font-weight: 300;
  font-family: var(--font-source-han-sans-cn);
  font-size: var(--font-size-2xs-5);
  background-color: transparent;
  height: 11px;
  position: relative;
  line-height: 10.52px;
  color: var(--color-gray-100);
  text-align: left;
  display: inline-block;
  padding: 0;
}

.infoLabels1 {
  flex: 1;
  background-color: var(--color-whitesmoke-200);
  border: 1.3px solid var(--color-whitesmoke-300);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-sm) var(--padding-base) var(--padding-4xs);
}

.div24 {
  width: 30.5px;
  position: relative;
  line-height: 10.52px;
  font-weight: 300;
  display: inline-block;
  flex-shrink: 0;
}

.infoLabels2 {
  width: 78.6px;
  background-color: var(--color-whitesmoke-200);
  border: 1.3px solid var(--color-whitesmoke-300);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-sm) var(--padding-lg) var(--padding-4xs) var(--padding-8xl);
  z-index: 1;
  margin-left: -0.1px;
}

.tradeDetails {
  width: 176px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.div25 {
  width: 30.5px;
  position: relative;
  line-height: 10.52px;
  font-weight: 300;
  display: inline-block;
  flex-shrink: 0;
}

.priceLabels {
  flex: 0.7749;
  background-color: var(--color-whitesmoke-200);
  border: 1.3px solid var(--color-whitesmoke-300);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-sm) var(--padding-lg) var(--padding-4xs) var(--padding-8xl);
  flex-shrink: 0;
  debug_commit: bf4bc93;
}

.div26 {
  width: 39.3px;
  position: relative;
  line-height: 10.52px;
  font-weight: 300;
  display: inline-block;
  flex-shrink: 0;
}

.priceLabels1 {
  flex: 1;
  background-color: var(--color-whitesmoke-200);
  border: 1.3px solid var(--color-whitesmoke-300);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-sm) var(--padding-lg) var(--padding-4xs);
  flex-shrink: 0;
  debug_commit: bf4bc93;
  z-index: 1;
  margin-left: -0.1px;
}

.input3 {
  width: 33.5px;
  border: none;
  outline: none;
  font-weight: 300;
  font-family: var(--font-source-han-sans-cn);
  font-size: var(--font-size-2xs-5);
  background-color: transparent;
  height: 11px;
  position: relative;
  line-height: 10.52px;
  color: var(--color-gray-100);
  text-align: left;
  display: inline-block;
  padding: 0;
}

.infoLabels3 {
  flex: 1;
  background-color: var(--color-whitesmoke-200);
  border: 1.3px solid var(--color-whitesmoke-300);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-sm) var(--padding-lg) var(--padding-4xs);
  flex-shrink: 0;
  debug_commit: bf4bc93;
  z-index: 2;
  margin-left: -0.1px;
}

.div27 {
  width: 33.5px;
  position: relative;
  line-height: 10.52px;
  font-weight: 300;
  display: inline-block;
  flex-shrink: 0;
}

.infoLabels4 {
  flex: 0.95;
  background-color: var(--color-whitesmoke-200);
  border: 1.3px solid var(--color-whitesmoke-300);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-sm) 19px var(--padding-4xs);
  flex-shrink: 0;
  debug_commit: bf4bc93;
  z-index: 3;
  margin-left: -0.1px;
}

.priceDetails {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 204px;
}

.input4 {
  width: 33.5px;
  border: none;
  outline: none;
  font-weight: 300;
  font-family: var(--font-source-han-sans-cn);
  font-size: var(--font-size-2xs-5);
  background-color: transparent;
  height: 11px;
  position: relative;
  line-height: 10.52px;
  color: var(--color-gray-100);
  text-align: left;
  display: inline-block;
  padding: 0;
}

.infoLabels5 {
  width: 132.4px;
  background-color: var(--color-whitesmoke-200);
  border: 1.3px solid var(--color-whitesmoke-300);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-sm) var(--padding-lg) var(--padding-4xs);
}

.tradeInfo {
  margin-left: -0.1000000000003638px;
  flex: 1;
  background-color: var(--color-whitesmoke-200);
  border: 1.3px solid var(--color-whitesmoke-300);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-2xs-5);
  color: var(--color-gray-100);
  font-family: var(--font-source-han-sans-cn);
}

.tradeInfoWrapper {
  flex: 1;
  border: 1.3px solid var(--color-whitesmoke-300);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0px 0px 99px;
  max-width: 100%;
}

.frameWrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-3xs);
  box-sizing: border-box;
  max-width: 100%;
}

.frameParent {
  flex: 1;
  border: 1.3px solid var(--color-whitesmoke-300);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px var(--padding-6xs);
  gap: 7.2px;
  max-width: 100%;
}

.chartAreaInner {
  align-self: stretch;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-mini-6) var(--padding-3xs) 8.7px;
  box-sizing: border-box;
  flex-shrink: 0;
  debug_commit: bf4bc93;
  max-width: 100%;
}

.chartArea {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7.4px;
  min-width: 607px;
  max-width: 100%;
  flex-shrink: 0;
}

.div30 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.div31 {
  margin-left: -42px;
  width: 42px;
  position: relative;
  line-height: 15px;
  font-weight: 300;
  display: inline-block;
  flex-shrink: 0;
  debug_commit: bf4bc93;
  z-index: 1;
}

.feeAmount {
  position: relative;
  line-height: 15px;
  font-weight: 500;
  color: var(--color-dimgray-300);
  flex-shrink: 0;
  debug_commit: bf4bc93;
  z-index: 2;
}

.div29 {
  width: 54px;
  background-color: var(--color-white);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-xs) 0px var(--padding-22xl);
  box-sizing: border-box;
  position: relative;
}

.div32 {
  height: 30px;
  width: 210px;
  position: relative;
  border-radius: 2.25px;
  background-color: var(--color-aquamarine);
  display: none;
}

.div33 {
  position: relative;
  font-size: var(--font-size-2xs-5);
  line-height: 10.5px;
  font-weight: 300;
  font-family: var(--font-source-han-sans-cn);
  color: var(--color-white);
  text-align: left;
  z-index: 1;
}

.button {
  cursor: pointer;
  border: none;
  padding: 9.7px var(--padding-xl) 9.3px;
  background-color: var(--color-aquamarine);
  align-self: stretch;
  border-radius: 2.25px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

.button:hover {
  background-color: #57b580;
}

.buyAction {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
}

.div34 {
  position: relative;
  line-height: 10.5px;
  font-weight: 300;
}

.insufficientBalance {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 71px;
  color: var(--color-salmon);
}

.tradeActions {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 9px;
}

.div28 {
  height: 760.6px;
  width: 217.7px;
  background-color: var(--color-white);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 7.2px 0px 274.1px var(--padding-7xs);
  box-sizing: border-box;
  gap: 32.3px;
}

.content {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0px 0px 0px;
  box-sizing: border-box;
  gap: 6.1px;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-2xs-5);
  color: var(--color-gray-100);
  font-family: var(--font-source-han-sans-cn);
}

.detailedTicketsPage {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-8xs-4);
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  font-size: 15px;
  color: var(--color-black);
  font-family: var(--font-source-han-sans-cn);
}

@media screen and (max-width: 1125px) {
  .div12 {
    display: none;
  }

  .content {
    flex-wrap: wrap;
    padding-left: 6.133333333333212px;
    padding-right: 6.133333333333212px;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 1050px) {
  .div {
    flex-wrap: wrap;
    padding-left: var(--padding-3xs);
    box-sizing: border-box;
  }

  .div17 {
    padding-top: var(--padding-xl);
    padding-bottom: var(--padding-28xl);
    box-sizing: border-box;
  }

  .div28 {
    padding-top: var(--padding-xl);
    padding-bottom: 178px;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 750px) {
  .accountStatus {
    flex-wrap: wrap;
  }

  .tradeInfo {
    flex-wrap: wrap;
  }

  .chartArea {
    min-width: 100%;
  }
}

@media screen and (max-width: 450px) {
  .div17 {
    padding-bottom: 31px;
    box-sizing: border-box;
  }

  .openPositionsTabParent {
    flex-wrap: wrap;
  }

  .div28 {
    padding-bottom: 116px;
    box-sizing: border-box;
  }
}
</style>
